<template>
  <div>
	  <div v-if="skeletonShow">
		   <a-skeleton active :paragraph="{ rows: 10 }" />
	  </div>
	   <div v-else>
		   
	  
    <!-- 搜索新增批量删除栏 -->
    <div class="btndel" >
      <div>
        <a-input-search
          placeholder="输入姓名"
          :loading="tableLoading"
          @change="onSearch"
          enter-button
          @search="onSearch"
        />
      </div>
      <div class="flex_f">
        <a-button icon="plus" type="primary" @click="addBtn()">新增</a-button>
        <a-button icon="right-circle" type="text">选中{{delList.length}}项</a-button>
        <a-button icon="close" type="danger" @click="delAllBtn()" :disabled="isFlag">批量删除</a-button>
      </div>
    </div>
    <!-- 表格 -->
    <a-table
      size="small"
	  :scroll="{ x: 900 }"
      :row-selection="rowSelection"
      :loading="tableLoading"
      :columns="columns"
      :data-source="data"
      row-key="id"
      :pagination="pagination"
    >
      <!-- <span slot="title" style="color: red">NAME</span> -->
      <span slot="type" slot-scope="row">
        <a-tag
          :color="row === '股票' ? 'green' : row == '基金' ? 'red' : row == '黄金'?'yellow': 'blue'"
        >{{ row }}</a-tag>
      </span>
      <template slot="action" slot-scope="row">
        <a-button icon="close" type="danger" @click="delBtn(row)">删除</a-button>
        <a-button icon="edit" type="primary" @click="editBtn(row)" style="margin-left:20px">修改</a-button>
      </template>
    </a-table>
    <!-- 新增框 -->
    <a-modal
      class="e_dia"
      :title="titleName"
      okText="确定"
      cancelText="取消"
      :visible="addFormShow"
      @ok="() => submitBtn()"
      @cancel="() => addFormShow=false"
    >
      <a-form-model
        class="mar_bto"
        :model="addform"
        ref="addRuleForm"
        :rules="addRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="用户名" prop="username">
          <a-input v-model="addform.username" />
        </a-form-model-item>
        <a-form-model-item label="工资" prop="pay">
          <a-input v-model="addform.pay" />
        </a-form-model-item>
        <a-form-model-item label="今日收益" prop="income">
          <a-input v-model="addform.income" />
        </a-form-model-item>
        <a-form-model-item label="累计收益" prop="accoutCash">
          <a-input v-model="addform.accoutCash" />
        </a-form-model-item>
        <a-form-model-item label="买入类型" prop="type">
          <a-select v-model="addform.type">
            <a-select-option v-for="(item,index) in typeList" :key="index" :value="item">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="买入地址" prop="address">
          <a-input v-model="addform.address" />
        </a-form-model-item>
        <a-form-model-item label="付款方式" prop="incomePayType">
          <a-input v-model="addform.incomePayType" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
   </div>
</template>

<script>
	import 'ant-design-vue/lib/skeleton/style/index.css';
	import 'ant-design-vue/lib/tag/style/index.css';
	import 'ant-design-vue/lib/table/style/index.css';
	import 'ant-design-vue/lib/input/style/index.css';
	import 'ant-design-vue/lib/pagination/style/index.css';
	import 'ant-design-vue/lib/button/style/index.css';
	import 'ant-design-vue/lib/form/style/index.css';
	import 'ant-design-vue/lib/form-model/style/index.css';
	import {Tag,Skeleton,Select,Table,Input,Pagination,Button,Form,FormModel} from 'ant-design-vue'; // 加载 JS
	import axios from "ts-axios-new";
		import 'ant-design-vue/lib/tag/style/index.css';
// import axios from "ts-axios-new";
import { getTableDataApi,addTableDataApi,editTableDataApi,delTableDataApi,delAllTableDataApi } from "@/api/tableAPI.ts"
const columns = [
  {
    title: "姓名",
    dataIndex: "username",
    key: "username 1",
    width: 70,
  },
  {
    title: "工资",
    align: "center",
    ellipsis: true,
    dataIndex: "pay",
    filtered: true,
    key: "id 7",
    width: 70,
    sorter: (a, b) => a.pay - b.pay,
  },
  {
    title: "今日收益",
    dataIndex: "income",
    key: "income 2",
    width: 100,
    align: "center",
    sorter: (a, b) => a.income - b.income,
    // ellipsis: true,
  },
  {
    title: "累计收益",
    dataIndex: "accoutCash",
    key: "accoutCash 3",
    align: "center",
    width: 100,
    sorter: (a, b) => a.accoutCash - b.accoutCash,
  },
  {
    title: "类型",
    dataIndex: "type",
    key: "type",
    align: "center",
    width: 80,
    filters: [
      { text: "股票", value: "股票" },
      { text: "基金", value: "基金" },
      { text: "黄金", value: "黄金" },
      { text: "期货", value: "期货" },
    ],
    onFilter: (value, record) => record.type.indexOf(value) === 0,

    scopedSlots: { customRender: "type" },
  },
  {
    title: "买入地址",
    dataIndex: "address",
    key: "address 5",
    align: "center",
    ellipsis: true,
  },
  {
    title: "出生时间",
    dataIndex: "createTime",
    key: "createTime 6",
    ellipsis: true,
    align: "center",
  },
  {
    title: "操作",
    key: "action",
    align: "center",
    scopedSlots: { customRender: "action" },
    width: 200,
  },
];
export default {
  data() {
    return {
		skeletonShow:true,
      data: [],
      tableLoading: false,
      columns: columns,
      searchVal: "",
      pagination: {
        pageSize: 5,
        current: 1,
        total: 0,
        showSizeChanger: true, // 显示可改变每页数量123
        pageSizeOptions: ["5", "10", "20", "50", "100"], // 每页数量选项123
        showTotal: (total) => `共${total}条`, // 显示总数
        onShowSizeChange: (current, pageSize) =>
          this.onShowSizeChange(current, pageSize),
        onChange: this.onPageChange.bind(this), //点击页码事件
        buildOptionrow: (pageSizeOptions) => `${pageSizeOptions.value}条/页`,
      },
      delList: [],
      isFlag: true,
      // 新增和编辑数据
      titleName: "新增",
      addFormShow: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      typeList: ["股票", "基金", "黄金", "买房"],
      addform: {
        username: null,
        address: null,
        income: null,
        pay: null,
        accoutCash: null,
        incomePayType: null,
      },
      addRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 1, max: 5, message: "用户名长度为3-5个字", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入家庭住址", trigger: "blur" },
        ],
        income: [
          { required: true, message: "请输入今日收益", trigger: "blur" },
        ],
        pay: [{ required: true, message: "请输入工资", trigger: "blur" }],
        type: [{ required: true, message: "请选择买入类型", trigger: "blur" }],
        accoutCash: [
          { required: true, message: "请输入累计收益", trigger: "blur" },
        ],
        incomePayType: [
          { required: true, message: "请输入付款方式", trigger: "blur" },
        ],
      },
    };
  },
  components:{	
	aTag:Tag,
	aSkeleton:Skeleton,
	aSelect:Select,
	aSelectOption:Select.Option,
	aTable:Table,
	aInput:Input,
	aInputSearch:Input.Search,
	aPagination:Pagination,
	aButton:Button,
	aForm:Form,
	aFormModel:FormModel,
	aFormModelItem:FormModel.Item,
	},
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.delList = selectedRows;
          if (selectedRows.length > 0) {
            this.isFlag = false;
          } else {
            this.isFlag = true;
          }
        },
      };
    },
  },
  created() {
    this.getData();
  },
  watch: {
    searchVal(val) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.pagination.current = 1;
        this.getData();
      }, 500);
    },
  },
  methods: {
    onSearch(val) {
      this.searchVal = val;
      // this.getData()
    },
    // 获取页数
    onPageChange(page) {
      this.pagination.current = page;
      this.getData();
    },
    // 获取显示条数
    onShowSizeChange(current, pageSize) {
      			this.pagination.current = 1
      this.pagination.pageSize = pageSize;
      this.getData();
      console.log(this.pagination.pageSize, "this.pageSize");
    },
    // 页面刚加载获取数据
    getData() {
      this.tableLoading = true;
      var dd = {
        endTime: "",
        limit: this.pagination.pageSize,
        name: this.searchVal,
        page: this.pagination.current,
        startTime: "",
      };
     getTableDataApi(dd)
        .then((res) => {
          if ((res.code = 200)) {
			  this.skeletonShow = false
            this.tableLoading = false;
            const data = res.data;
            this.data = data.moneyList;
            this.pagination.total = data.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除单条数据
    delBtn(val) {
      var _this = this;
      this.$confirm({
        okType: "danger",
        content: "确认删除该记录吗",
        onOk() {
         
            delTableDataApi({ id: val.id })
            .then((res) => {
              if ((res.code = 200)) {
                const data = res.data;
                _this.$message.success(data.message, 2);
                _this.getData();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        },
        onCancel() {
          console.log("已取消");
        },
      });
    },
    // 删除多条数据
    delAllBtn() {
      var _this = this;
      let rowIds = [];
      this.delList.forEach((item) => {
        rowIds.push(item.id);
      });
      const ids = rowIds.toString();
      this.$confirm({
        okType: "danger",
        content: "确认批量删除该记录吗",
        onOk() {
          delAllTableDataApi({ids})
            .then((res) => {
              if ((res.code = 200)) {
                const data = res.data;
                _this.$message.success(data.message, 2);
                _this.getData();
                _this.delList = [];
                _this.isFlag = true;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        },
        onCancel() {
          console.log("已取消");
        },
      });
    },
    //打开新增框
    addBtn() {
      this.titleName = "新增";
      this.addFormShow = true;
      this.addform = {};
      if (this.$refs.addRuleForm !== undefined) {
        this.$refs.addRuleForm.resetFields();
      }
    },
    // 打开修改框
    editBtn(row) {
      this.titleName = "编辑";
      this.addFormShow = true;
      this.addform = JSON.parse(JSON.stringify(row));
      this.$nextTick(() => {
        this.$refs.addRuleForm.clearValidate();
      });
    },

    //提交
    submitBtn() {
      this.$refs.addRuleForm.validate((valid) => {
        if (valid) {
          if (this.titleName == "新增") {
            this.submitAddBtn();
          } else {
            this.submitEditBtn();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新增提交
    submitAddBtn() {
        addTableDataApi(this.addform)
        .then((res) => {
          if ((res.code = 200)) {
            this.$refs.addRuleForm.resetFields();
            const data = res.data;
            this.addFormShow = false;
            this.$message.success(data.message, 2);
            this.getData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 修改提交
    submitEditBtn() {
        addTableDataApi(this.addform)
        .then((res) => {
          if ((res.code = 200)) {
            this.$refs.addRuleForm.resetFields();
            const data = res.data;
            this.addFormShow = false;
            this.$message.success(data.message, 2);
            this.getData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.btndel {
  display: flex;
  justify-content: space-between;
  padding: 5px 20px;
  .bjys;
  // background: .bjys;
  margin-bottom: 20px;
  border: #ededed 1px solid;
  .flex_f {
	  display: flex;
	  flex-direction: row;
    button {
      margin-right: 10px;
    }
  }
}
.e_dia {
	/deep/.ant-modal{
		  position: relative;
		      top: 50px;
	}
  /deep/ .ant-modal-body {
    padding: 15px 24px;
    .mar_bto {
      .ant-form-item {
        margin-bottom: 12px;
        /deep/ .ant-form-explain {
          font-size: 10px;
          position: absolute;
        }
      }
    }
  }
}
</style>
